<template>
  <div class="user-address-outer-outer">
    <div class="user-address-outer">
      <div style="padding: 10px 0">
        <a-button shape="round" type="primary" @click="toOpenModal(true)">Add address</a-button>
      </div>

      <div class="user-address" v-for="address in addressList">

        <a-descriptions :labelStyle="{'font-size':'13px'}" :contentStyle="{'font-size':'14px'}" :column="{ sm: 2, md: 3}">
          <template #title>
            AddressName ：<div style="display: inline">{{ address.title == null ? 'Unnamed' : address.title }}</div>
          </template>
          <template #extra>
            <a-button type="link" size="small" @click="toOpenModal(false,address)" style="padding: 0 3px;">Edit</a-button>
            <a-button type="link" size="small" danger @click="toDeleteAddress(address.id)" style="padding: 0 3px;">Delete</a-button>
          </template>
          <a-descriptions-item label="Country">{{ address.country }}</a-descriptions-item>
          <a-descriptions-item label="Full name">{{ address.recipients }}</a-descriptions-item>
          <a-descriptions-item label="Street address" :span="3">
            {{ address.address }}
            <br v-if="address.others != null && address.others.trim().length > 0"/>
            {{ (address.others != null && address.others.trim().length > 0) ? ( ''+address.others.trim()) : '' }}
          </a-descriptions-item>

          <a-descriptions-item label="State / Province">{{ address.province }}</a-descriptions-item>
          <a-descriptions-item label="City">{{ address.newCity }}</a-descriptions-item>
          <a-descriptions-item label="ZIP / Postal code">{{ address.city }}</a-descriptions-item>
          <a-descriptions-item label="Phone number">{{ address.phone }}</a-descriptions-item>
          <a-descriptions-item label="Email address">{{ address.email }}</a-descriptions-item>
        </a-descriptions>


<!--        <div class="user-address-title-outer-outer">-->
<!--          <div class="user-address-title-outer">-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="user-address-info-outer-outer">-->
<!--          <div class="user-address-info-outer">-->
<!--            <div class="user-address-info-title-outer-outer">-->
<!--              <div class="user-address-info-title-outer">-->

<!--              </div>-->
<!--            </div>-->
<!--            <div class="user-address-info-main-outer-outer">-->
<!--              <div class="user-address-info-main-outer">-->

<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
    </div>

    <a-modal v-model:visible="state.showAddModal" @cancel="toCloseModal" @ok="toAddAddress">
      <a-form layout="horizontal" :labelCol="{style:{ 'width': '120px','font-size':'14px'  }}" style="margin-top: 20px">
        <a-form-item label="AddressName">
          <basic-input v-model="state.middleAddress.title" />
        </a-form-item>
        <a-form-item label="Country">
          <basic-input v-model="state.middleAddress.country" />
        </a-form-item>
        <a-form-item label="Full name">
          <basic-input v-model="state.middleAddress.recipients" />
        </a-form-item>
        <a-form-item label="Street address">
          <basic-input v-model="state.middleAddress.address"  placeholder="Street address,P.O.box,company name, c/o"/>

          <basic-input v-model="state.middleAddress.others" placeholder="Apartment,suite, unit, building,floor, etc." style="margin-top: 5px;"></basic-input>
        </a-form-item>


        <a-form-item label="State / Province">
          <basic-input v-model="state.middleAddress.province" />
        </a-form-item>
        <a-form-item label="City">
          <basic-input v-model="state.middleAddress.newCity" />
        </a-form-item>
        <a-form-item label="ZIP / Postal code">
          <basic-input v-model="state.middleAddress.city" />
        </a-form-item>
        <a-form-item label="Phone number">
          <basic-input v-model="state.middleAddress.phone" />
        </a-form-item>
        <a-form-item label="Email address">
          <basic-input v-model="state.middleAddress.email" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal v-model:visible="state.showUpdateModal" @cancel="toCloseModal" @ok="toEditAddress">
      <a-form layout="horizontal" :labelCol="{style:{ 'width': '120px','font-size':'14px'  }}" style="margin-top: 20px">
        <a-form-item label="AddressName">
          <basic-input v-model="state.middleAddress.title" />
        </a-form-item>
        <a-form-item label="Country">
          <a-select
              :value="state.middleAddress.country"
              :options="countries"
              style="width: 100%;border-color:  #bbbbbf;border-radius: 6px;"
          >
            <a-select-option :value="country.value" v-for="country in countries">{{country.label}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="Full name">
          <basic-input v-model="state.middleAddress.recipients" />
        </a-form-item>
        <a-form-item label="Street address">
          <basic-input v-model="state.middleAddress.address"  placeholder="Street address,P.O.box,company name, c/o"/>

          <basic-input v-model="state.middleAddress.others" placeholder="Apartment,suite, unit, building,floor, etc." style="margin-top: 5px;"></basic-input>
        </a-form-item>
        <a-form-item label="State / Province">
          <basic-input v-model="state.middleAddress.province" />
        </a-form-item>
        <a-form-item label="City">
          <basic-input v-model="state.middleAddress.newCity" />
        </a-form-item>
        <a-form-item label="ZIP / Postal code">
          <basic-input v-model="state.middleAddress.city" />
        </a-form-item>
        <a-form-item label="Phone number">
          <basic-input v-model="state.middleAddress.phone" />
        </a-form-item>
        <a-form-item label="Email address">
          <basic-input v-model="state.middleAddress.email" />
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<script lang="ts">
import {defineComponent, ref, reactive, computed, watch, onMounted, createVNode} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {addAddress, AddressType, deleteAddressById, searchAddress, updateAddressById} from '../../api/AddressRequest';
import { notification,Modal} from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';

const countries=[
  {
    value:'United States',
    label:'United States',
    imgUrl:''
  }
]
export default defineComponent({
  setup(props, context) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const emptyAddress:AddressType={
      user_id:null,
      title:null,
      country:null,
      province:null,
      city:null,
      district:null,
      name:null,
      phone:null,
      email:null,
      address:null,
      others:null,
      newCity:null
    }

    const state=reactive({
      showUpdateModal:false,
      showAddModal:false,
      uploadState:false,
      middleAddress:JSON.parse(JSON.stringify(emptyAddress))
    })


    const addressList=ref<AddressType[]|undefined>([]);

    const toSearchAddress = async () => {
      searchAddress().then((res) => {
        addressList.value=res.data.result;
      })
    }

    onMounted(() => {
      toSearchAddress();
    })

    const toDeleteAddress=async (id:string)=>{
      Modal.confirm({
        title: 'Do you Want to delete this items?',
        icon: createVNode(ExclamationCircleOutlined),
        onOk() {
          deleteAddressById(id).then(async (res)=>{
            await toSearchAddress();
            notification['success']({
              message: 'action success',
            })
          }).catch((res)=>{
            notification['warning']({
              message: res.data.message,
            })
          })
        }
      })
    }
    const toEditAddress=async ()=>{
      if(state.middleAddress!=null){
        state.uploadState=true
        await updateAddressById(state.middleAddress).then(async (res)=>{
          await toSearchAddress();
          notification['success']({
            message: 'action success',
          })
          toCloseModal();
        }).catch((res)=>{
          notification['warning']({
            message: res.data.message,
          })
        }).finally(()=>{
          state.uploadState=false
        })
      }
    }
    const toAddAddress=async ()=>{
      if(state.middleAddress!=null){
        state.uploadState=true
        await addAddress(state.middleAddress).then(async (res)=>{
          await toSearchAddress();
          notification['success']({
            message: 'action success',
          })
          toCloseModal();
        }).catch((res)=>{
          notification['warning']({
            message: res.data.message,
          })
        }).finally(()=>{
          state.uploadState=false
        })
      }
    }

    const toCloseModal=()=>{
      state.showAddModal=false
      state.showUpdateModal=false
    }

    const toOpenModal=(isAdd:boolean,address:AddressType|null=null)=>{
      if(isAdd){
        state.middleAddress=JSON.parse(JSON.stringify(emptyAddress));
        state.showAddModal=true
      }else {
        state.middleAddress=JSON.parse(JSON.stringify(address));
        state.showUpdateModal=true
      }
    }

    return {
      addressList,
      state,
      toDeleteAddress,
      toCloseModal,
      toOpenModal,
      toEditAddress,
      toAddAddress,
      countries
    }
  }
})
</script>

<style scoped lang="less">
.user-address-outer-outer {
  padding: 20px;
  @media screen and(max-width: 768px) {
    padding: 15px;
  }
  @media screen and(max-width: 576px) {
    padding: 10px;
  }
  @media screen and(max-width: 425px) {
    padding: 0;
  }

  .user-address-outer {
    background-color: #f5f5f5;
    border-radius: 16px;
    padding: 20px 40px;

    @media screen and(max-width: 768px) {
      padding: 15px;
    }

    @media screen and(max-width: 425px) {
      padding: 10px;
      border-radius: 0;
    }

    .user-address{
      background-color: white;
      border-radius: 16px;
      padding: 10px;
      margin-bottom: 10px;
    }
    .user-address:last-child{
      margin-bottom: 0;
    }

  }
}


</style>
<style>

.ant-descriptions-header{
  margin-bottom: 5px!important;
}
.ant-descriptions-row > td{
  padding-bottom: 5px!important;
}
</style>
